<template>
  <div>
<!--    查询-->
    <el-form ref="searchForm" :inline="true" :model="searchWhere" class="demo-form-inline">
      <el-form-item label="酒号" style="margin-top: 20px;margin-bottom: 10px;padding-left: 10px;" prop="wineid">
        <el-input v-model="searchWhere.wineid" placeholder="酒号"></el-input>
      </el-form-item>
      <el-form-item label="酒名" style="margin-top: 20px;margin-bottom: 10px;" prop="wineName">
        <el-input v-model="searchWhere.wineName" placeholder="酒名称"></el-input>
      </el-form-item>
      <el-form-item label="酒的类型" style="margin-top: 20px;margin-bottom: 10px;" prop="wineType">
        <el-select v-model="searchWhere.wineType" placeholder="酒的类型">
          <el-option v-for="option in wineClassfiys"
                     :key="option.type"
                     :label="option.name"
                     :value="option.type"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="生产日期" style="margin-top: 20px;margin-bottom: 10px;" prop="productionDate">
        <el-date-picker
            v-model="searchWhere.productionDate"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @click="fetchData()"
            :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="margin-top: 20px;margin-bottom: 10px;" @click="find">查询</el-button>
        <el-button @click="resetForm('searchForm')">重置</el-button>
        <el-button type="primary" @click="dialogFormVisible = true" style="margin-top: 20px;margin-bottom: 10px;">新增</el-button>
      </el-form-item>
    </el-form>
<!--    表格-->
    <el-table :data="WineclassfiyList" :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}" style="width: 100%" max-height="700">
<!-- type="index" 自动生成编号     -->
      <el-table-column fixed type="index" label="序号" width="160">
      </el-table-column>
      <el-table-column prop="wineid" label="酒号" width="220">
      </el-table-column>
      <el-table-column prop="wineName" label="酒名" width="220">
      </el-table-column>
      <el-table-column prop="wineType" label="酒的类型" width="220">
        <template slot-scope="scope">
          <span>{{scope.row.wineType|wineTypeFiler}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="productionDate" label="生产日期" width="220">
      </el-table-column>
      <el-table-column prop="price" label="价格" width="160">
      </el-table-column>
      <el-table-column prop="quantity" label="剩余量" width="160">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="220">
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="primary"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
      </el-table-column>
    </el-table>
<!--    分页-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total" style="position:fixed;height: 100px;width: 100%;">
    </el-pagination>
<!--    新增对话框-->
    <el-dialog title="添加酒信息" :visible.sync="dialogFormVisible" width="500px">
      <el-form :model="form" label-width="100px" label-position="right" ref="addFrom" style="width: 400px" :rules="rules">
        <el-form-item label="酒号" prop="wineid">
          <el-input v-model="form.wineid"></el-input>
        </el-form-item>
        <el-form-item label="酒名"prop="wineName" >
          <el-input v-model="form.wineName"></el-input>
        </el-form-item>
          <el-form-item label="酒的类型" style="margin-top: 20px;margin-bottom: 10px;">
            <el-select v-model="searchWhere.wineType" placeholder="请选择酒的类型">
              <el-option v-for="option in wineClassfiys"
                         :key="option.type"
                         :label="option.name"
                         :value="option.type"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="生产日期" >
            <el-date-picker
                v-model="productionDate"

                type="date"

                placeholder="选择日期">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="价格" >
          <el-input v-model="form.price"></el-input>
        </el-form-item>
        <el-form-item label="剩余数量" >
          <el-input v-model.number="form.quantity"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addData('addFrom')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//导入
import wineclassfiy from "@/api/wineclassfiy";
//定义一个酒的类型
const wineClassfiys=[
  {type:'1',name:'浓香型'},
  {type:'2',name:'酱香型'},
  {type:'3',name:'清香型'},
  {type:'4',name:'米香型'}

]

export default {
  name: "Classification",
    //定义一个过滤器
  filters:{
      wineTypeFiler(type){
        const winetypeobj = wineClassfiys.find(obj=>obj.type===type)
        return winetypeobj?winetypeobj.name:null
      }
    },
  data() {
      return {
        //定义一个数组接收
        WineclassfiyList:[],
        total:0,
        currentPage:1,
        pageSize:10,
        //搜索条件
        searchWhere:{
          wineid:'',
          wineName:'',
          wineType:'',
          productionDate:'',
        },
         /* id:null,
          wineName: "",
          wineType: "",
          productionDate:'',*/
        //  查询
          wineClassfiys,
          //日期
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
       // 新增对话框,刚开始不显示
        dialogFormVisible:false,
        form:{
          wineid:'',
          wineName:'',
          wineType:'',
          productionDate:'',
          price:'',
          quantity:'',
          number:'',
        },
    //    新增对话框
        rules:{
          wineid:[
            {required:true,message:'请输入酒号',trigger:'blur'}
          ],
          wineName:[
            {required:true,message:'请输入酒名',trigger:'blur'}
          ],
          wineType:[
            {required:true,message:'请选择酒的类型',trigger:['blur','change']}
          ],
          productionDate:[
            {required:true,message:'请输入生产日期',trigger:'blur'}
          ],
          quantity:[
            {required:true,message:'请输入酒的数量',trigger:'blur'},
            //  验证数据类型
            {type:'number',message:'输入的酒的数量必须为数字',trigger:'blur'},

          ]
        }
    }
    },
    mounted() {
    },
//  钩子函数
  created() {
    this.fetchData()
  },
  methods:{
    fetchData(){
      // wineclassfiy.getWineclassfiyList().then(response=>{
      wineclassfiy.search(this.currentPage,this.pagesSize,this.searchWhere).then(response=>{
        const resp = response.data
        console.log(resp.data)
        this.WineclassfiyList = resp.data.rows
        this.tatal = resp.data.total
      })
    },
    //查询
    find() {
      this.$alert('抱歉，并未查询到您需要的所查找的相关酒',  {
        confirmButtonText: '确定',
        /*callback: action => {
          this.$message({
            // type: 'info',
           /!* message: `action: ${ action }`*!/
          });
        }*/
      });
    },
    //新增的提交
    addData(fromName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          wineclassfiy.add(this.from).then(response=>{
            const resp =response.data
            if(resp.flag){
              this.fetchData()
              this.dialogFormVisible=false
            }
            else {
              this.$message({
                message:resp.message,
                type:'wraning'
              })
            }
          })
        } else {
          console.log('添加失败!');
          return false;
        }
      });
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    //每页的记录
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.fetchData()
      console.log(pageSize);
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.fetchData()
      console.log(currentPage);
    },
    //查询
    onSubmit() {
      console.log('submit!');
    },
  //  重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }

  }
}
</script>

<style scoped>

</style>
